@(listGames: List[_ <: utils.ContainGame], user: User, typeList: Integer = 0)

@main("Accueil") {
    @if(!flash.isEmpty()) {
        @for((msgKey, msgValue) <- flash) {
            <div class="alert alert-global">
                <button type="button"
                        class="close"
                        data-dismiss="alert">&times;</button>
                @msgValue
            </div>
        }
    }
    <div class="wrap">
    <div class="menu-list-game">
        <ol>
            <li><a href="@routes.Kiry.index(0)"
                   list-type="0"
                   title="Jeux sans avis"
                   class="menu-list-game-link">Jeux sans avis</a></li>
            <li><a href="@routes.Kiry.index(1)" 
                   list-type="1"
                   title="Jeux desirés"
                   class="menu-list-game-link">Jeux desirés</a></li>
            <li><a href="@routes.Kiry.index(2)" 
                   list-type="2"
                   title="Jeux possédés"
                   class="menu-list-game-link">Jeux possedés</a></li>
            <li><a href="" 
                   title="Jeux indiffénts"
                   class="menu-list-game-link">Jeux indifférents</a></li>
            <li><a href="@routes.Kiry.index(4)"
                   list-type="4"
                   title="Tous les jeu"
                   class="menu-list-game-link">Tous les jeux</a></li>
        </ol>
    </div>
        <div id="frame-list-game" class="smart">
            <ul class="list-game">
            @listGames.map { game =>
                <li id-game-db="@game.getGame.idgamedb"
                    id-game="@game.getGame.id"
                    >
                    <nobr>
                        <div class="image">
                            <img class="lazy"
                                 src="@routes.Assets.at("images/img-transparent.gif")"
                                 alt="Jaquette">
                        </div>
                        <div style="display: inline-block;">
                            <div>
                                <strong><h4>@game.getGame.gametitle</h4></strong>
                                @game.getGame.developer.name<br>
                                @game.getGame.publisher.name<br>
                            </div>
                            <div class="info-right">
                                <span>@game.getGame.platform.name</span>
                                <span>@if(game.getGame.releasedate != null){@game.getGame.releasedate.format("MMM yyyy")}</span>
                                <span><h5 class="rating">@if(game.getGame.rating != 0){@game.getGame.rating}</h5></span>
                            </div>
                            @if(typeList == 0) {
                                <div class="btn-action-game">
                                    <ul>
                                        <li>
                                            <a href="javascript:addGameToOwnList(
                                                       '@user.email',
                                                        @game.getGame.id,
                                                        'addGameToOwnList')">
                                                <span class="fui-plus-24 icon-tools"></span>
                                                <span class="hide-responsive">Je possède ce jeu</span>
                                            </a>
                                        <li>
                                            <a href="javascript:addGameToWishList(
                                                       '@user.email',
                                                        @game.getGame.id,
                                                        'addGameToWishList')">
                                                <span class="fui-heart-24 icon-tools"></span>
                                                <span class="hide-responsive">Je désire ce jeu</span>
                                            </a>
                                        <li>
                                            <a href="@routes.Kiry.newgame">
                                                <span class="fui-cross-24 icon-tools"></span>
                                                <span class="hide-responsive">Ce jeu ne m'intéresse pas</span>
                                            </a>
                                    </ul>
                                </div>
                            }
                            <div class="info-supp">
                                @game.getGame.youtube
                                @game.getGame.genres.map { genre => @genre.name }<br>
                            </div>
                        </div>
                    </nobr>
                </li>
                }
            </ul>
        </div>
    </div>
}
<script>
    $(document).ready(function() {
        loadPictures();

        $(".list-game > li").mouseover(function() {
            if (isGameRemoved(this))
                return;
            $(this).find(".btn-action-game").show();
            $(this).css("background", "#666");
        });

        $(".list-game > li").mouseout(function() {
            if (isGameRemoved(this))
                return;
            $(this).find(".btn-action-game").hide();
            $(this).css("background", "#555");
        });

        var previousBackgroundColor = "";
        $(".list-game > li").mousedown(function() {
            if (isGameRemoved(this))
                return;
            previousBackgroundColor = $(this).css("background");
            $(this).css("background", "#444");
        });

        $(".list-game > li").mouseup(function() {
            if (isGameRemoved(this))
                return;
            $(".btn-action-game").hide();
            $(this).find(".btn-action-game").show();
            $(this).css("background", previousBackgroundColor);
        });

        var previousLetter = "";
        $(".list-game > li").each(function() {
            var curentLetter = $(this).find("h4").html()[0];
            if (previousLetter != curentLetter) {
                $("<li class='index-list-game'>"+curentLetter+"<hr></li>").insertBefore(this);
                previousLetter = curentLetter;
            }
        });

        // make active current link
        $("a[list-type='@typeList']").addClass("active");

        // Allow drag and drop
        $(".list-game li").draggable({
            cursor: "-webkit-grabbing",
            cursorAt: { top: 50, left: 50 },
            helper: function(event) {
                return $("<img width='100px' src='"+$(this).find(".image > img").attr("data-background")+"'>");
            }
        });

        $("li[id-game]").click(function() {
            $.get("/getDetailsGame/" + $(this).attr("id-game"), function (result) {
                openDetailsGame(result);
            });
        });
    });

    openDetailsGame = function (content) {
        var body = document.getElementsByTagName("body")[0];

        // Creates dialog box.
        var dialogDiv = document.createElement('div');
        dialogDiv.style.backgroundColor = "white";
        $(dialogDiv).css("box-shadow", "rgba(0, 0, 0, 0.3) 2px 2px 3px");
        dialogDiv.style.border = "1px solid black";
        dialogDiv.style.overflow = "hidden";
        dialogDiv.style.padding = "12px";
        dialogDiv.style.position = "fixed";
        dialogDiv.style.width = "400px";
        $(dialogDiv).draggable({containment: "parent"});
        dialogDiv.innerHTML = content;
        alert("FAIRE UN PETIT EFFET AU POPUP")
  
        // Creates background box.
        var backgroundDiv = document.createElement('div');
        backgroundDiv.id = "";
        backgroundDiv.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
        backgroundDiv.style.bottom = 0;
        backgroundDiv.style.left = 0;
        backgroundDiv.style.position = "fixed";
        backgroundDiv.style.right = 0;
        backgroundDiv.style.top = 0;
        backgroundDiv.style.zIndex = 50000;
        backgroundDiv.appendChild(dialogDiv);

        // Add element's to DOM.
        $(body).append(backgroundDiv);

        // Center the dialog box
        var x = (window.innerWidth - dialogDiv.offsetWidth) / 2;
        var y = (window.innerHeight - dialogDiv.offsetHeight) / 3;
        dialogDiv.style.left = x+"px";
        dialogDiv.style.top = y+"px";
    }

    isGameRemoved = function(game) {
        return $(game).hasClass("removed");
    }

    var timerRemoveGame;
    var gameToRemove = [];
    addGameToWishList = function(email, idGame) {
        addGameToList(email, idGame, "addWishGame", "Le jeu a été ajouté à votre liste de souhaits");
    }
    addGameToOwnList = function(email, idGame) {
        addGameToList(email, idGame, "addOwnGame", "Le jeu a été ajouté à votre collection");
    }

    addGameToList = function(email, idGame, link, message) {
        var $game = $("li[id-game='" + idGame + "']");
        $.get("/" + link + "/" + email + "/" + idGame, function (data) {
            $game.addClass("removed");
            $game.prepend('<div class="sucess-add-game">' + message + '</div>');
            gameToRemove.push($game);
            clearTimeout(timerRemoveGame);
            timerRemoveGame = setTimeout(timeoutRemoveGameExpire, 3000);
        });
    }

    checkIndexListGame = function() {
        $("li.index-list-game + li.index-list-game").prev().remove();
    }

    timeoutRemoveGameExpire = function() {
        var buffer = gameToRemove;
        gameToRemove = [];
        for (var i = 0; i < buffer.length; i++) {
            $(buffer[i]).animate({opacity: 0}, 500, function() {$(this).remove(); checkIndexListGame();});
        }
    }

    loadPictures = function() {
        $(".list-game > li").each(function() {
            var link = "/getGameInfo/" + $(this).attr("id-game-db");
            var game = this;
            $.get(link, function(data) {
                var baseUrl = $(data).find("baseImgUrl").text();
                var front = $(data).find("boxart[side='front']").attr("thumb");
                $(game).find("img.lazy").attr("data-background", baseUrl+front);
                $($(game).find("img.lazy")).lazyload({effect : "fadeIn"});
                $(window).trigger('scroll');
            });
        });
    }
</script>
